import React from 'react';

const OrderPage: React.FC = () => {
  return (
    <div className="bg-white p-6 rounded-lg shadow-md">
      <h1 className="text-2xl font-bold mb-4">订单管理</h1>
      <div className="mb-4">
        <button className="bg-blue-500 text-white px-4 py-2 rounded mr-2">创建订单</button>
        <button className="bg-gray-200 px-4 py-2 rounded">导出</button>
      </div>
      <div className="overflow-x-auto">
        <table className="min-w-full bg-white">
          <thead className="bg-gray-100">
            <tr>
              <th className="py-2 px-4 text-left">订单号</th>
              <th className="py-2 px-4 text-left">客户</th>
              <th className="py-2 px-4 text-left">产品</th>
              <th className="py-2 px-4 text-left">金额</th>
              <th className="py-2 px-4 text-left">订单时间</th>
              <th className="py-2 px-4 text-left">状态</th>
              <th className="py-2 px-4 text-left">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr className="border-t">
              <td className="py-2 px-4">ORD-20230001</td>
              <td className="py-2 px-4">张三</td>
              <td className="py-2 px-4">笔记本电脑</td>
              <td className="py-2 px-4">¥6999</td>
              <td className="py-2 px-4">2023-10-15</td>
              <td className="py-2 px-4"><span className="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">已完成</span></td>
              <td className="py-2 px-4">
                <button className="text-blue-500 mr-2">详情</button>
                <button className="text-gray-500">打印</button>
              </td>
            </tr>
            <tr className="border-t">
              <td className="py-2 px-4">ORD-20230002</td>
              <td className="py-2 px-4">李四</td>
              <td className="py-2 px-4">智能手机</td>
              <td className="py-2 px-4">¥3999</td>
              <td className="py-2 px-4">2023-10-16</td>
              <td className="py-2 px-4"><span className="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs">配送中</span></td>
              <td className="py-2 px-4">
                <button className="text-blue-500 mr-2">详情</button>
                <button className="text-gray-500">打印</button>
              </td>
            </tr>
            <tr className="border-t">
              <td className="py-2 px-4">ORD-20230003</td>
              <td className="py-2 px-4">王五</td>
              <td className="py-2 px-4">无线耳机</td>
              <td className="py-2 px-4">¥599</td>
              <td className="py-2 px-4">2023-10-17</td>
              <td className="py-2 px-4"><span className="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">待付款</span></td>
              <td className="py-2 px-4">
                <button className="text-blue-500 mr-2">详情</button>
                <button className="text-red-500">取消</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default OrderPage; 